<template>
  <!-- 弹出层 -->
  <el-dialog :visible="visible" :title="formDate.id?'编辑区域':'添加区域'" width="580px" @close="$emit('update:visible', false)">
    <el-row type="flex" justify="center">
      <el-form ref="formRef" size="mini" :model="formDate" :rules="rules">
        <el-form-item label="区域名称" prop="areaName">
          <el-input v-model="formDate.areaName" placeholder="请输入区域名称" style="width:380px" />
        </el-form-item>
        <el-form-item label="车位数（个）" prop="spaceNumber">
          <el-input v-model="formDate.spaceNumber" placeholder="请输入车位" style="width:380px" />
        </el-form-item>
        <el-form-item label="面积（㎡²）" prop="areaProportion">
          <el-input v-model="formDate.areaProportion" placeholder="请输入面积" style="width:380px" />㎡
        </el-form-item>
        <el-form-item label="关联计费规则" prop="ruleId">
          <el-select
            v-model="formDate.ruleId"
            placeholder="请选择"
            style="width:380px"
          >
            <el-option label="分段计费" :value="1">分段计费</el-option>
            <el-option label="按次收费" :value="2">按次收费</el-option>
            <el-option label="按小时计费" :value="3">按小时计费</el-option>
            <el-option label="按分钟计费" :value="4">按分钟计费</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formDate.remark" type="textarea" placeholder="请输入备注" style="width:380px" />
        </el-form-item>
        <el-row type="flex" justify="end">
          <el-form-item>
            <el-button @click="$emit('update:visible', false)">取消</el-button>
            <el-button type="primary" size="medium" @click="onSubmit"> 确认</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
import { editDisAPI, updateDisAPI } from '@/api/district'
export default {
  // 父传子接收
  props: {
    visible: Boolean
  },
  data() {
    return {

      // 表单校验
      formDate: {
        areaName: '',
        spaceNumber: null,
        areaProportion: null,
        ruleId: null,
        remark: ''
      },
      // 定义校验规则
      rules: {
        areaName: [
          { required: true, message: '请输入区域名称！', trigger: 'blur' }
        ],
        spaceNumber: [
          { required: true, message: '请输入车位个数！', trigger: 'blur' }
        ],
        areaProportion: [
          { required: true, message: '请输入面积！', trigger: 'blur' }
        ],
        ruleId: [
          { required: true, message: '请选择关联计费规则！', trigger: 'blur' }
        ]
      }
    }
  },
  //   重置表单
  watch: {
    visible(newVisible) {
      if (!newVisible) {
        // 重置表单
        this.$refs.formRef.resetFields()
        this.formDate = {
          name: '',
          floors: '',
          area: '',
          propertyFeePrice: ''
        }
      }
    }
  },
  methods: {
    // 点击确认提交校验 设置ref 获取表单
    async onSubmit() {
      // 判断是编辑还是添加
      this.$refs.formRef.validate()
      if (!this.formDate.id) {
        await updateDisAPI(this.formDate)
      } else {
        await editDisAPI(this.formDate)
      }

      // 发送成功后关闭弹窗 刷新页面
      this.$emit('update:visible', false)
      this.$message.success(this.formDate.id ? '编辑成功' : '添加成功')
      //   通知父组件刷新页面
      this.$emit('onSuccess')
    }
  }
}
</script>

<style>

</style>
